<template>
  <div class="left">
      <div class="login-wrap">
              <!--  <img src="../../assets/loginIcon.png" alt=""> -->
              <input class="name" name="" id="accountName" type="text" placeholder="请输入账号" v-model="name">
              <input class="code" name="password" id="password" type="password" placeholder="请输入密码" v-model="password">
              <div class="btn">
                  <input type="button" id="submit" class="submit" @click = "login()" value="登录">
                  <input type="reset" id="reset" class="reset" value="重置">
              </div>
      </div>
  </div>
</template>

<script>
  export default {
    name:'Login',
    data () {
  return{
    name:'',
    password:''
  }

    },
    methods:{
      login(){
        var _this=this
          if(this.name && this.password){
          const ip = localStorage.getItem('Ip')
          var data=[]
          data.adminName=this.name
          data.password= this.password
           data.lastLoginIp=ip
              console.log(ip)
                this.$axios
                .post('/api/admin/login', {
                    adminName: this.name,
                    password: this.password,
                    lastLoginIp:ip
                  },)
                  .then(function (response) {
                    if(response.data.code==0){
                       _this.$cookies.set('adminName', _this.name)
                       _this.$cookies.set('token', response.data.data.token)
                      // console.log('response.data.data.token',response.data.data.token)
                       _this.$cookies.set('adminType',response.data.data.adminType)
                        _this.$router.push({ name:'Head'});
                    }else{
                      if(response.data.code===3001){
                        _this.$alert('账号密码错误', '提示', {
                           confirmButtonText: '确定',
                           callback: action => {

                           }
                         });
                      }else{
                        _this.$alert('网络错误', '提示', {
                           confirmButtonText: '确定',
                           callback: action => {

                           }
                         });
                      }
                    }
                    console.log(response);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
          }else{
            console.log(1111)
          }
      }
    }

  }
</script>

<style scoped>
  .left{
      width: 100%;
      height:100vh;
      background: wheat;
      background-image: url(../../assets/login.jpg);

  }
  .login-wrap{
    width:320px;
    height: 300px;
    position: fixed;
    top: 33%;
    left: 39%;
  }
  .name{
      background: url("../../assets/ID.png") no-repeat left;
      background-position-x: 0px;
          background-size: 40px 37px;
  }
 .code{
      background: url("../../assets/password.png") no-repeat left;
      background-position-x: 0px;
       background-size: 33px 29px;

  }
.login-wrap h3{
    color: #0C0C0C;
    text-align: center;
    font-size: 30px;
}
.button{
    padding-top: 10%;
    padding-left: 42%;
}
.name,.code{
    border:1px solid #fff;
    width:230px;
    height: 40px;
    margin-left: 25px;
    margin-bottom: 20px;
    padding-left: 40px;
}
.btn input{
    height: 40px;
    width: 120px;
    margin-right: 25px;
    border:none;
    color:#fff;
    font-size: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
}
input:active{border-color:#147a62}
.submit{background: #ea8c37;margin-left: 25px;}
.reset{background: #bbb;}
h3{
  background-color: transparent;
}
</style>
